import React, { Component } from 'react'
import './Li.css';
import { Button } from 'antd';

export default class Li extends Component {
  state = {
    isEdit: false,
    val: ''
  }

  componentDidUpdate() {
    if (this.state.isEdit) {
      this.refs.inp.focus();
    }
  }

  render() {
    let { item } = this.props;
    let isDone = item.isDone;

    return (

      <li key={item.id} className={item.isDone ? 'isDone' : ''}>
        <input type="checkbox" checked={isDone} onChange={
          (e) => {
            console.log('e', e.target.checked);

            this.props.isDone(item.id, e.target.checked)
          }
        } />
        <span onClick={() => {
          this.setState({ isEdit: true });


        }} key={item.id} style={{ display: this.state.isEdit ? 'none' : 'inline' }}> {item.title}
          <span>  </span>
          <Button type="link" onClick={() => {
            this.props.delList(item.id)
          }}>删除</Button>
        </span>

        <input ref="inp" type="text" value={item.title} style={{ display: this.state.isEdit ? 'inline' : 'none' }}

          onChange={(e) => {
            this.props.editList(item.id, e.target.value)
          }}

          onBlur={(e) => {
            this.setState({ isEdit: false })
          }}

          onKeyDown={({ keyCode }) => {

            if (keyCode === 13) {
              this.setState({ isEdit: false })
            }
          }}
        />
      </li>
    )
  }
}